<template>
  <div>
    <div class="login-container">
      <h2 class="login-title">LOGIN</h2>
      <el-form :model="form" :rules="rules" ref="regegisterForm" label-width="100px">
        <el-form-item label="USERNAME" prop="account" class="el-form-item__error">
          <el-input v-model="form.account" class="input-field" placeholder="Enter Username"></el-input>
        </el-form-item>
        <el-form-item label="PASSWORD" prop="password" class="el-form-item__error">
          <el-input type="password" v-model="form.password" class="input-field" placeholder="Enter Password"></el-input>
        </el-form-item>
        <el-form-item label="CONFIRM PASSWORD" prop="repassword" class="el-form-item__error">
          <el-input type="password" v-model="form.repassword" class="input-field" placeholder="Password Again"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" class="login-button" @click="register">Register</el-button>
        </el-form-item>
      </el-form>
      <div class="login-links">
        <router-link to="/login" class="login-link">Already have an account?Log in</router-link>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      form: {
        account: "",
        password: "",
        repassword:"",
      },
      rules: {
        account: [
          { required: true, message: "请输入用户名", trigger: ["change", "blur"] },
          {
            pattern: /[a-zA-Z]/,
            message: "字母",
            trigger: ["change", "blur"],
          },
        ],
        password: {
          required: true,
          min:3,
          message: "请输入至少3个字符的密码",
          trigger: ["change", "blur"],
        },
        repassword:{
          required: true,
          min:3,
          message: "请输入至少3个字符的密码",
          trigger: ["change", "blur"],
        },
      },
    };
  },
  methods: {
    register() {

      this.$refs.regegisterForm.validate((valid) => {
        if (valid) {
          const formData = {
            username: this.form.account,
            password: this.form.password,
            repassword: this.form.repassword

          };
          if (this.form.password !== this.form.repassword) {
            alert("两次密码不一致");
          } else{
            this.$axios
                .post("api/register", formData)
                .then((successResponse) => {
                  if (successResponse.data.code === 200) {
                    console.log(successResponse.data);
                    alert("成功注册")
                    location.href="/login";
                  }
                  if (successResponse.data.code === 400) {
                    console.log(successResponse.data);
                    alert("注册失败")
                    location.href="/register";
                  }
                })
                .catch((failResponse) => {

                  console.error();
                });
          }
        } else {
          return false;
        }
      });
    },
  },
};
</script>

<style>
.login-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin: auto;
  margin-top: 100px;
  background-color: #fff;
  border-radius: 4px;
  padding: 20px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  width: 300px;
}

.login-title {
  font-size: 24px;
  margin-bottom: 20px;
}

.input-field {
  border:0;
  margin-bottom: 15px;
  padding-right: 35px;
  padding-bottom:10px;
}
input.el-input__inner {
  margin-top: -5px;
  width: 195px;
  height:42px;
  outline: none;
  border:1px solid #2c3e50;
  background: transparent;
  border-radius: 45px;
}

.login-button {
  padding: 10px 25px;
  background:radial-gradient(ellipse at center,#d1d2d4,#73f219,#000000);
  color: #000000;
  border: none;
  border-radius: 75px;
  cursor: pointer;
  font-size: 16px;
}

.login-links {
  margin-top: 10px;
  display: flex;
  justify-content: center;

}

.login-link {
  font-weight: bold;
  font-size: 20px;
  color: #007bff;
  text-decoration: none;
  margin: 0 5px;
}

.el-form-item__error {
  font-weight: bold;
  margin-bottom: 2px;
  text-align: left;
  text-decoration: none;
  font-size: 12px;
}
</style>
